import React from 'react';
import CreateTable from '@/components/CreateTable';
import classNames from 'classnames';
// import constant from '@/const';
// import { StateType } from '@/common-typings';
// import { formatText } from '@/components/CreateTable/utils';
import ReactEcharts from 'echarts-for-react';
import styles from '@/pages/riskControl/deviantWithdrawReview/details/index.less';
import { formatText } from '@/components/CreateTable/utils';

// const placeholder = '--';

/**
 * 获取财务信息
 * @param that
 */
export const getFinanceData = (that: any) => {
  const { financeLoading, financeList } = that.state;
  const tableConfig = {
    loading: financeLoading,
    config: { bordered: true },
    header: [
      {
        title: '充值次数',
        dataIndex: 'rechargeNum',
        formatMember: true,
      },
      {
        title: '充值金额',
        dataIndex: 'rechargeSum',
        formatAmount: true,
      },
      {
        title: '取款次数',
        dataIndex: 'withdrawNum',
        formatMember: true,
      },
      {
        title: '取款总额',
        dataIndex: 'withdrawSum',
        formatAmount: true,
      },
      {
        title: '红利',
        dataIndex: 'bonusSum',
        formatAmount: true,
      },
    ],
    data: financeList || [],
  };
  return (
    <div className={styles['details-group']}>
      <CreateTable tableConfig={tableConfig} />
    </div>
  );
};

/**
 * 获取余额
 * @param that
 */
export const getBalanceData = (that: any) => {
  const { balanceLoading, balanceList } = that.state;
  const tableConfig = {
    loading: balanceLoading,
    config: { bordered: true },
    header: [
      {
        title: '平台',
        dataIndex: 'operates',
      },
      {
        title: '主账户余额',
        dataIndex: 'balance',
        formatAmount: true,
      },
      {
        title: '提现冻结金额',
        dataIndex: 'freezeBalance',
        formatAmount: true,
      },
      {
        title: '上分总额',
        dataIndex: 'amount',
        formatAmount: true,
      },
      {
        title: '会员上分',
        dataIndex: 'payOutAmount',
        formatAmount: true,
      },
      {
        title: '代理上分',
        dataIndex: 'proxyCreditedAmount',
        formatAmount: true,
      },
      {
        title: '剩余上分额度',
        dataIndex: 'validAllocateAmount',
        formatAmount: true,
      },
    ],
    data: balanceList || [],
  };
  return (
    <div className={styles['details-group']}>
      <CreateTable tableConfig={tableConfig} />
    </div>
  );
};

/**
 * 资金概要
 * @param that
 */
export const getFundsData = (that: any) => {
  const { fundsLoading, fundsList } = that.state;
  const tableConfig = {
    loading: fundsLoading,
    config: { bordered: true },
    header: [
      {
        title: '代理线资金情况',
        dataIndex: 'balance',
        width: 720,
        children: [
          {
            title: '月份',
            dataIndex: 'month',
            width: 80,
          },
          {
            title: '总存款',
            dataIndex: 'totalRechargeAmount',
            width: 160,
            render: (text: number | string) => formatText(text, { formatAmount: true }),
          },
          {
            title: '总代充',
            dataIndex: 'totalUpAmountAmount',
            render: (text: number | string) => formatText(text, { formatAmount: true }),
            width: 160,
          },
          {
            title: '总取款',
            dataIndex: 'totalWithdrawAmount',
            render: (text: number | string) => formatText(text, { formatAmount: true }),
            width: 160,
          },
          {
            title: '总盈亏',
            dataIndex: 'totalProfitAmount',
            render: (text: number | string) => formatText(text, { formatAmount: true }),
            width: 160,
          },
        ],
      },
    ],
    data: fundsList || [],
  };
  return (
    <div className={styles['details-group']}>
      <CreateTable tableConfig={tableConfig} />
    </div>
  );
};

/**
 * 人员概要
 * @param that
 */
export const getMemberData = (that: any) => {
  const { memberLoading, memberList } = that.state;
  const tableConfig = {
    loading: memberLoading,
    config: { bordered: true },
    header: [
      {
        title: '月份',
        dataIndex: 'balance',
      },
      {
        title: '大用户',
        dataIndex: 'mostContributiveCount',
        formatMember: true,
      },
      {
        title: '兜底层',
        dataIndex: 'basementCount',
        formatMember: true,
      },
      {
        title: '代理',
        dataIndex: 'parentCount',
        formatMember: true,
      },
      {
        title: '新增会员',
        dataIndex: 'newPlayerCount',
        formatMember: true,
      },
    ],
    data: memberList || [],
  };
  return (
    <div className={styles['details-group']}>
      <CreateTable tableConfig={tableConfig} />
    </div>
  );
};

/**
 * 大客户统计
 * @param that
 */
export const getCustomerData = (that: any) => {
  const getOptions = (prev = 0, next = 1, rate = 0) => ({
    color: ['#1890FF', '#d9d9d9'],
    series: [
      {
        name: '大客户统计',
        type: 'pie',
        radius: ['50%', '70%'],
        avoidLabelOverlap: false,
        hoverAnimation: false,
        legendHoverLink: false,
        label: {
          normal: {
            show: true,
            position: 'center',
            color: '#6c7a89',
            formatter: `${rate * 100}%`,
            fontSize: 30,
          },
        },
        labelLine: {
          normal: {
            show: false,
          },
        },
        data: [{ value: prev, name: '小客户统计' }, { value: next, name: '大客户统计' }],
      },
    ],
  });
  const { customerData } = that.state;

  // 人数
  const mcPerson = customerData.mcPerson || '';
  // 营收
  const mcAmount = customerData.mcAmount || '';

  const prevPerson = customerData.mcPersonRate || 0;
  const nextPerson = 1 - prevPerson;

  const prevAmount = customerData.mcAmountRate || 0;
  const nextAmount = 1 - prevAmount;

  const personOptions = getOptions(prevPerson, nextPerson, prevPerson);
  const amountOptions = getOptions(prevAmount, nextAmount, prevAmount);

  return (
    <div className={classNames(styles['details-group'], styles['details-charts'])}>
      <div>
        <ReactEcharts style={{ width: '300px', height: '200px' }} option={personOptions} />
        <div style={{ textAlign: 'center' }}>
          <p>大用户人数占比</p>
          {mcPerson && <p>{formatText(mcPerson, { formatMember: true })}人</p>}
        </div>
      </div>
      <div>
        <ReactEcharts style={{ width: '300px', height: '200px' }} option={amountOptions} />
        <div style={{ textAlign: 'center' }}>
          <p>大用户贡献营收占比</p>
          {mcAmount && <p>{formatText(mcAmount, { formatAmount: true })}元</p>}
        </div>
      </div>
    </div>
  );
};
